<template>
  <div
    :style="{ paddingLeft: `${left}px` }"
    :class="{'marked-editor-max': amplification}"
    class="marked-custom-editor"
  >
    <el-row :gutter="10" clsss="w-el-row">
      <el-col :span="12" clsss="w-el-col">
        <el-input v-model="textareaStr" class="textarea" type="textarea" placeholder="请输入内容"/>
      </el-col>
      <el-col :span="12" clsss="w-el-col">
        <div class="marked-editor-sprsing">
          <w-psrsing :datastr="textareaStr"/>
        </div>
      </el-col>
    </el-row>
    <div class="scale">
      <i
        v-if="amplification"
        class="el-icon-circle-close icon w-pointer"
        @click="amplification = false"
      />
      <i v-else class="el-icon-rank icon w-pointer" @click="amplification = true"/>
      <i v-if="savebtn" class="el-icon-document icon w-pointer" @click="saveClick"/>
      <i
        v-if="imgbtn"
        class="el-icon-picture-outline icon w-pointer"
        @click="imgPop.isShow = true"
      />
    </div>
    <el-dialog
      :visible.sync="imgPop.isShow"
      :append-to-body="false"
      :modal-append-to-body="false"
      title="图片上传"
      width="500px"
    >
      <div class="image-up-pop-content">
        <p class="up-image-url">
          <img
            id="marked-custom-editor-copy-img"
            data-clipboard-target="#marked-custom-editor-copy-el"
            v-if="imgPop.url"
            class="copy-icon w-pointer"
            src="../../../assets/global/copy.png"
            alt
          >
          <span id="marked-custom-editor-copy-el">{{ imgPop.url }}</span>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          :loading="imgPop.loading"
          :disabled="imgPop.loading"
          type="primary"
          size="mini"
          @click="imageUpClick"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import WPsrsing from "@/components/global/marked/parsing.vue";
import WPopView from '@/utils/popView'
import { Component, Vue, Prop } from "vue-property-decorator";
import ClipboardJS from 'clipboard';

@Component({
  components: {
    WPsrsing
  }
})
export default class MarkedCustomEditor extends Vue {
  @Prop({ default: 0 }) left!: number;
  @Prop({ default: true }) savebtn!: boolean;
  @Prop({ default: false }) imgbtn!: Boolean;

  // 输入的数据
  textareaStr = "";
  // 是否放大
  amplification = false;
  // 图片弹窗
  imgPop = {
    isShow: false,
    url: "",
    loading: false
  };

  // 获取数据
  getData() {
    return this.textareaStr;
  }
  // 设置数据
  setData(data: string) {
    this.textareaStr = data;
  }
  // 保存按钮点击
  saveClick() {
    this.$emit("save");
  }
  // 图片上传按钮点击
  async imageUpClick() {
    try {
      this.imgPop.loading = true;
      this.imgPop.url = await (this.$refs["IMAGE_UP"] as any).upImage();
    } catch (e) {
      console.log(e);
    } finally {
      this.imgPop.loading = false;
    }
  }

  mounted() {
    this.registerCopyEvent();
  }

  // 粘贴板
  registerCopyEvent() {
    const clipboard = new ClipboardJS("#marked-custom-editor-copy-img");
    clipboard.on("success", function(e: any) {
      WPopView.msgSuccess("已复制粘贴板");
      e.clearSelection();
    });

    clipboard.on("error", function() {
      WPopView.msgError("复制粘贴板失败");
    });
  }
}
</script>

<style lang="scss">
.marked-custom-editor {
  position: relative;
  .marked-editor-sprsing {
    height: calc(100vh - 30px);
    overflow: auto;
    border: 1px solid #d3d7e1;
    border-radius: 4px;
  }
  .textarea {
    textarea {
      height: calc(100vh - 30px);
      resize: none;
    }
  }
  .scale {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    flex-direction: column;
    > .icon {
      color: #999;
      margin-bottom: 7px;
    }
    > .icon:hover {
      color: coral;
    }
  }
}
.marked-editor-max {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
  background-color: #fff;
  padding-left: 0px !important;
  .marked-editor-sprsing {
    height: calc(100vh);
  }
  .textarea {
    textarea {
      height: calc(100vh);
    }
  }
}
.image-up-pop-content {
  display: flex;
  justify-content: space-between;
  > .image-up {
    flex: 0 1 auto;
  }
  > .up-image-url {
    background-color: #eee;
    border-radius: 3px;
    margin: 0;
    width: 330px;
    box-sizing: border-box;
    padding: 10px;
    word-wrap: break-word;
    line-height: 22px;
    color: #999;
    position: relative;
    > .copy-icon {
      position: absolute;
      right: 5px;
      bottom: 5px;
      width: 20px;
      height: 20px;
    }
  }
}
</style>
